<template>
	<u-picker :show="show" ref="uPicker" :columns="columns" keyName="label" @change="changeHandler" confirmColor="#675f91" @confirm="confirm" @cancel="cancel" :loading="loading"></u-picker>
</template>

<script>
	let supply_type = [{
			id: 's1_meat',
			label: '荤菜类'
		},
		{
			id: 's2_vege',
			label: '素菜类'
		},
		{
			id: 's3_rice_etc',
			label: '米面油蛋'
		},
		{
			id: 's4_fruit_drink',
			label: '水果饮料'
		},
		{
			id: 's5_seasoning',
			label: '干货调料'
		},
		{
			id: 's9_others',
			label: '其他'
		},
	];
	export default {
		name: "msupplier-picker",
		props: {
			show: Boolean,
			msupplier: Array
		},
		data() {
			return {
				// 'supply_type': {'s1_meat':'荤菜类', 's2_vege':'素菜类','s3_rice_etc':'米面油蛋',
				//                 's4_fruit_drink':'水果饮料','s5_seasoning':'干货调料','s9_others':'其他'},
				columns: [
					[],
					[]
				],
				columnData: [],
				loading: false,
			};
		},
		watch:{
			// msupplier: {
			// 	handler(newVal, oldVal) {
			// 		console.log('-----------msupplier-------------');
			// 		if(newVal.length == 0){
			// 			return;
			// 		}
			// 	},
			// 	immediate: true,
			// 	deep: true
			// }
			show(newVal, oldVal){
				if(newVal){
					this.init();
				}
			}
		},
		mounted(){
			
		},
		methods: {
			init(){
				this.loading = true
				let columnData = [];
				let columns = [];
				const picker = this.$refs.uPicker;
				// console.log(picker);
				setTimeout(()=>{
					supply_type.forEach(type => {
						let array = this.msupplier.filter(v => v.supply_type == type.id).map(v => {
							return {
								id: v.id,
								label: v.supplier_nick_name
							}
						});
						if(array.length>0){
							columns.push(type);
							columnData.push(array)
						}
					});
					// console.log(columnData);
					// console.log(this.columnData[0]);
					this.columnData = columnData;
					picker.setColumnValues(0, columns);
					picker.setColumnValues(1, this.columnData[0]);
					this.loading = false
				},0)
				
			},
			changeHandler(e) {
				// console.log(e);
				const picker = this.$refs.uPicker;
				const {
					columnIndex,
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
				} = e
				if (columnIndex === 0) {
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			confirm(e){
				// console.log(e);
				this.$emit('confirm',e.value[1]);
			},
			cancel(e){
				this.$emit('cancel');
			}
		}
	}
</script>

<style>

</style>